<!-- 基础题库 -->
<template>
  <div class="container">
    <el-card >
      <question-head @search="search" @addTest="addTest" :counts="counts"></question-head>

      <el-table :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="number" label="试题编号" width="120px"> </el-table-column>
        <el-table-column prop="subject" label="学科" width="106px"> </el-table-column>
        <el-table-column prop="catalog" label="目录" width="103px"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="103px" :formatter="editType"></el-table-column>
        <el-table-column prop="question" label="题干" width="260px">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180px" :formatter="editTime"> </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="103px" :formatter="editDif"> </el-table-column>
        <el-table-column prop="creator" label="录入人" width="103px"> </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-tooltip content="预览" placement="bottom" effect="light">
              <el-button icon="el-icon-view" @click="handleSee(scope.row.id)" type="primary" plain circle></el-button>
            </el-tooltip>
            <el-tooltip content="修改" placement="bottom" effect="light">
              <el-button icon="el-icon-edit" @click="handleEdit(scope.row)" type="success" plain circle></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="bottom" effect="light">
              <el-button icon="el-icon-delete" @click="handleDel(scope.row)" type="danger" plain circle></el-button>
            </el-tooltip>
            <el-tooltip content="加入精选" placement="bottom" effect="light">
              <el-button icon="el-icon-check" @click="handleAdd(scope.row)" type="warning" plain circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 30px; margin-bottom: 20px; float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <questions-preview  :dialogVisible.sync="dialogVisible" :rowDetail="rowDetail"></questions-preview>
  </div>
</template>

<script>
import QuestionHead from '@/components/QuestionHead'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import { parseTimeByString } from '@/filters'
import QuestionsPreview from '../components/questions-preview'
export default {
  data () {
    return {
      tableData: [], // 页面数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 当前页容量
      counts: 0, // 当前数据条数
      questionType,
      difficulty,
      rowDetail: {}, // 子组件数据
      dialogVisible: false // 弹出层
    }
  },
  components: {
    QuestionHead,
    QuestionsPreview
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取当前页面数据
    async getList () {
      try {
        const { data } = await list({
          page: this.currentPage,
          pagesize: this.pageSize
        })
        this.counts = data.counts
        this.tableData = data.items
        // console.log(this.tableData)
      } catch (error) {
        console.log(error)
      }
    },
    // 格式化题型内容
    editType (row) {
      // console.log(this.questionType)
      // console.log(row.questionType)
      this.questionType.forEach((item) => {
        if (item.value === +row.questionType) {
          row.questionType = item.label
        }
      })
      return row.questionType
    },
    // 格式化难度内容
    editDif (row) {
      this.difficulty.forEach((item) => {
        if (item.value === +row.difficulty) {
          row.difficulty = item.label
        }
      })
      return row.difficulty
    },
    // 格式化时间内容
    editTime (row) {
      // console.log(row.addDate)
      row.addDate = parseTimeByString(row.addDate)
      return row.addDate
    },
    // 子组件的搜索按钮
    async search (v) {
      try {
        // const { data } = await list({
        //   // subjectID: v.subject,
        //   // difficulty: v.difficulty,
        //   // questionType: v.testingTypes,
        //   // province: v.province,
        //   // city: v.citys,
        //   keyword: v.keyword,
        //   // remarks: v.note,
        //   // shortName: v.enterprise,
        //   // direction: v.direction,
        //   // creatorID: v.enter,
        //   page: this.currentPage,
        //   pagesize: this.pageSize
        // })
        if (v.subject) {
          const { data } = await list({
            subjectID: v.subject
          })
          this.counts = data.counts
          this.tableData = data.items
        } else if (v.keyword) {
          const { data } = await list({
            keyword: v.keyword
          })
          this.counts = data.counts
          this.tableData = data.items
        } else {
          const { data } = await list()
          this.counts = data.counts
          this.tableData = data.items
        }
      } catch (error) {}
    },
    // 新增文章的点击
    addTest () {
      // console.log(1)
      this.$router.push({ name: 'questions-new' })
    },
    // 页面容量变化
    handleSizeChange (v) {
      this.pageSize = v
    },
    // 页码改变
    handleCurrentChange (v) {
      this.currentPage = v
      this.getList()
    },
    // 预览
    async handleSee (v) {
      try {
        this.dialogVisible = true
        const { data } = await detail({
          id: v
        })
        this.rowDetail = data
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑
    handleEdit (v) {
      this.$router.push({ name: 'questions-new', query: { id: v.id } })
    },
    // 删除
    handleDel (v) {
      try {
        this.$confirm('此操作会将永久删除该文件,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await remove({ id: v.id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 添加到精选题库
    handleAdd (v) {
      try {
        this.$confirm('此操作会将该题目加入精选,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choiceAdd({
            choiceState: 1,
            id: v.id
          })
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
          this.getList()
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
// 祛除背景颜色
/deep/.el-alert--error.is-light {
  background-color: #ffffff;
  color: pink;
}
.container {
  padding: 15px 10px;
}
</style>
